<template>
	<view class="all">
		<view class="container">
			<view class="balance">
				<text>当前现金余额（元）</text>
				<text class="amount1">1500.00</text>
				<button class="withdraw-button" @click="onWithdrawClick">提现</button>
			</view>
			<view class="divider"></view>
			<view class="summary">
				<text class="money">累计收入(元)</text>
				<text class="amount0">1700.00</text>
				<text class="money">累计提现(元)</text>
				<text class="amount0">200.00</text>
			</view>
		</view>
		<view class="center">
			<view class="left">
				<text>收支明细</text>
			</view>
			<view class="right">
				<image src="../../../static/日期.png" class="price"></image>
				<text class="date">日期</text>
			</view>
		</view>
		<view class="cont">
			<view v-for="(record, index) in records" :key="index" class="record">
				<text class="description">{{ record.description }}</text>
				<text :class="['amount', record.amount < 0 ? 'withdraw' : '']">
					{{ record.amount < 0 ? record.amount : '+' + record.amount }}
				</text><br/>
				<text class="time">核销时间：{{ record.time }}</text>
			</view>
		</view>
	</view>

</template>

<style>
	.container {
		width: 100%;
		height: 100px;
		display: flex;
		background-color: #007bff;
		padding: 10px;
		color: #fff;
		text-align: center;
		justify-content: space-around;
	}

	.balance {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: -40px;
	}

	.summary {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-left: 20px;
		margin-top: 10px;
	}

	.money {
		font-size: 15px;
		margin-left: -90px;
		margin-top: 10px;

	}

	.amount0 {
		font-size: 16px;
		margin-top: -20px;
		margin-right: -20px;
	}

	.amount1 {
		font-size: 16px;
		margin: 10px 0;
		margin-left: -85px;

	}

	.withdraw-button {
		line-height: 10px;
		font-size: 16px;
		background-color: orange;
		color: #fff;
		border: none;
		padding: 10px 20px;
		cursor: pointer;
		margin-left: 10px;
	}

	.divider {
		margin-left: -50px;
		width: 1px;
		height: auto;
		background-color: #fff;
	}

	.center {
		padding: 10px 0;
	}

	.left {
		float: left;
		margin-left: 20px;
		font-size: 14px;
		color: #4E514E;
		font-weight: 600;
	}

	.right {
		float: right;
		font-size: 14px;
		color: #53C5F8;
		margin-right: 40px;
		font-weight: 600;

	}

	.date {
		float: right;
		margin-left: 10px;
	}

	.price {
		margin-left: 120px;
		width: 17px;
		height: 17px;
	}

	.cont {
		margin-top: 20px;
		padding: 20px;
		background-color: #f9f9f9;
	}

	.record {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.description {
		font-size: 18px;
	}

	.amount {
		float: right;
		font-weight: bold;
		color: green;
	}

	.amount.withdraw {
		color: red;
	}

	.time {
		font-size: 14px;
		color: #888;
	}
</style>
<script>
	export default {
		data() {
			return {
				records: [{
						description: "XX车辆清洗、抛光打蜡服务",
						amount: +25.00,
						time: "2022-10-10 11:09"
					},
					{
						description: "提现",
						amount: -225.00,
						time: "2022-10-10 11:09"
					},
					{
						description: "XX车辆清洗、抛光打蜡服务",
						amount: +25.00,
						time: "2022-10-10 11:09"
					},
					{
						description: "XX车辆清洗、抛光打蜡服务",
						amount: +25.00,
						time: "2022-10-10 11:09"
					},
				]
			};
		},
		methods:{
			onWithdrawClick(){
				uni.navigateTo({
					url:"/pages/szy-ShouZhiMingXi/tixian/tixian"
				})
			}
		}
	}
</script>